<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原神角色表</title>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
    <style>
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: #333;
        }
    </style>
</head>

<body>

<div id="app">
    <el-container style="height: 750px; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu @open="handleOpen" @close="handleClose">
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-menu"></i>星级</template>
                    <el-menu-item index="1-1" @click="selectConditions.starLevel=''; selectByConditions()">不限</el-menu-item>
                    <el-menu-item index="1-2" @click="selectConditions.starLevel=4; selectByConditions()">四星</el-menu-item>
                    <el-menu-item index="1-3" @click="selectConditions.starLevel=5; selectByConditions()">五星</el-menu-item>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title"><i class="el-icon-menu"></i>元素</template>
                    <el-menu-item index="2-1" @click="selectConditions.element=''; selectByConditions()">不限</el-menu-item>
                    <el-menu-item index="2-2" @click="selectConditions.element='火'; selectByConditions()">火</el-menu-item>
                    <el-menu-item index="2-3" @click="selectConditions.element='水'; selectByConditions()">水</el-menu-item>
                    <el-menu-item index="2-4" @click="selectConditions.element='风'; selectByConditions()">风</el-menu-item>
                    <el-menu-item index="2-5" @click="selectConditions.element='雷'; selectByConditions()">雷</el-menu-item>
                    <el-menu-item index="2-6" @click="selectConditions.element='草'; selectByConditions()">草</el-menu-item>
                    <el-menu-item index="2-7" @click="selectConditions.element='冰'; selectByConditions()">冰</el-menu-item>
                    <el-menu-item index="2-8" @click="selectConditions.element='岩'; selectByConditions()">岩</el-menu-item>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title"><i class="el-icon-menu"></i>武器</template>
                    <el-menu-item index="3-1" @click="selectConditions.weapon=''; selectByConditions()">不限</el-menu-item>
                    <el-menu-item index="3-2" @click="selectConditions.weapon='单手剑'; selectByConditions()">单手剑</el-menu-item>
                    <el-menu-item index="3-3" @click="selectConditions.weapon='双手剑'; selectByConditions()">双手剑</el-menu-item>
                    <el-menu-item index="3-4" @click="selectConditions.weapon='法器'; selectByConditions()">法器</el-menu-item>
                    <el-menu-item index="3-5" @click="selectConditions.weapon='弓'; selectByConditions()">弓</el-menu-item>
                    <el-menu-item index="3-6" @click="selectConditions.weapon='枪'; selectByConditions()">枪</el-menu-item>
                </el-submenu>

            </el-menu>
        </el-aside>

        <el-container>
            <el-header style="text-align: right; font-size: 20px">
                <el-dropdown>
                    <i class="el-icon-setting" style="margin-right: 24px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>查看</el-dropdown-item>
                        <el-dropdown-item>新增</el-dropdown-item>
                        <el-dropdown-item>删除</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <span>赵筱晗</span>
            </el-header>

            <el-header>
                <el-button type="danger" plain @click="deleteYuanShenByNames">批量删除</el-button>
                <el-button type="primary" plain @click="dialogVisible = true">添加角色</el-button>
                <el-input v-model="searchName" style="width: 150px" placeholder="请输入角色姓名"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="selectByName">搜索</el-button>
            </el-header>

            <el-main>
                <el-table ref="multipleTable" :data="subTableData" tooltip-effect="dark" border style="width: 60%"
                          @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="40">
                    </el-table-column>
                    <el-table-column fixed="left" prop="name" label="名字" width="150">
                    </el-table-column>
                    <el-table-column prop="starLevel" label="星级" width="120">
                    </el-table-column>
                    <el-table-column prop="element" label="元素属性" width="150">
                    </el-table-column>
                    <el-table-column prop="weapon" label="武器" width="150">
                    </el-table-column>

                    <el-table-column fixed="right" label="操作" width="120">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="updateInterface(scope.row)">修改</el-button>
                            <el-button type="text" size="small" @click="deleteYuanShen(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        @next-click="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 20]"
                        :page-size="currentPageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="tableData.length">
                </el-pagination>

            </el-main>

            <el-dialog
                    title="添加角色"
                    :visible.sync="dialogVisible"
                    width="30%"
                    :before-close="handleClose">

                <el-input v-model="yuanShen.name" placeholder="请输入角色姓名"></el-input>
                <el-select v-model="yuanShen.starLevel" placeholder="星级">
                    <el-option
                            v-for="item in starOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="yuanShen.element" placeholder="元素属性">
                    <el-option
                            v-for="item in elementOptions"
                            :key="item"
                            :label="item"
                            :value="item">
                    </el-option>
                </el-select>
                <el-select v-model="yuanShen.weapon" placeholder="武器">
                    <el-option
                            v-for="item in weaponOptions"
                            :key="item"
                            :label="item"
                            :value="item">
                    </el-option>
                </el-select>
                <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addYuanShen">添 加</el-button>
                <el-button @click="dialogVisible = false">取 消</el-button>
            </span>
            </el-dialog>

            <el-dialog
                    title="编辑角色"
                    :visible.sync="dialogVisibleUpdate"
                    width="30%"
                    :before-close="handleClose">

                <el-input v-model="yuanShen.name" placeholder="请输入角色姓名" :disabled="true"></el-input>
                <el-select v-model="yuanShen.starLevel" placeholder="星级">
                    <el-option
                            v-for="item in starOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="yuanShen.element" placeholder="元素属性">
                    <el-option
                            v-for="item in elementOptions"
                            :key="item"
                            :label="item"
                            :value="item">
                    </el-option>
                </el-select>
                <el-select v-model="yuanShen.weapon" placeholder="武器">
                    <el-option
                            v-for="item in weaponOptions"
                            :key="item"
                            :label="item"
                            :value="item">
                    </el-option>
                </el-select>
                <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="updateYuanShen">修 改</el-button>
                <el-button @click="dialogVisibleUpdate = false">取 消</el-button>
            </span>
            </el-dialog>

        </el-container>
    </el-container>

</div>


<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<script src="../js/axios-0.27.2-min.js"></script>

<script>
    new Vue ({
        el: "#app",

        data() {
            return {
                dialogVisible: false,
                dialogVisibleUpdate: false,
                tableData: [],
                subTableData: [],
                currentPage: 1,
                currentPageSize: 5,
                multipleSelection: [],
                selectedNames: [],
                searchName: '',
                selectConditions: {
                    name: '',
                    starLevel: '',
                    element: '',
                    weapon: ''
                },
                yuanShen: {
                    name: '',
                    starLevel: '',
                    element: '',
                    weapon: ''
                },
                starOptions: [
                    {value:4, label:'四星'},
                    {value:5, label:'五星'}
                ],
                elementOptions: ['火','水','风','雷','草','冰','岩'],
                weaponOptions: ['单手剑','双手剑','法器','弓箭','枪']
            }
        },

        mounted() {
            this.selectAll();
        },

        methods: {

            clearYuanShen() {
                this.yuanShen = {name: '', starLevel: '', element: '', weapon: ''
                };
            },

            selectAll() {
                var _this = this;
                axios({
                    method: "get",
                    url: "http://localhost:8080/weby_spring_war/yuanShen/selectAll"
                }).then(function (resp) {
                    _this.tableData = resp.data;
                    _this.handleCurrentChange(_this.currentPage);
                })
            },

            selectByName() {
                var _this = this;
                axios({
                    method: "get",
                    url: "http://localhost:8080/weby_spring_war/yuanShen/selectByName?name=" + _this.searchName
                }).then(function (resp) {
                    _this.subTableData = [resp.data];
                    _this.searchName = '';
                })
            },

            selectByConditions() {
                var _this = this;
                axios({
                    method: "post",
                    url: "http://localhost:8080/weby_spring_war/yuanShen/selectByConditions",
                    data: _this.selectConditions
                }).then(function (resp) {
                    _this.tableData = resp.data;
                    _this.handleCurrentChange(_this.currentPage);
                })
            },

            addYuanShen() {
                var _this = this
                axios({
                    method: "post",
                    url: "http://localhost:8080/weby_spring_war/yuanShen/add",
                    data: _this.yuanShen
                }).then(function (resp) {
                    if(resp.data === "添加成功"){
                        _this.dialogVisible = false;
                        _this.selectAll();
                        _this.messageSuccess(resp.data, 'success');
                    } else {
                        _this.messageSuccess(resp.data, 'warning');
                    }
                    _this.clearYuanShen();
                })
            },

            updateInterface(row) {
                this.yuanShen = row;
                this.dialogVisibleUpdate = true;
            },

            updateYuanShen() {
                var _this = this
                axios({
                    method: "post",
                    url: "http://localhost:8080/weby_spring_war/yuanShen/update",
                    data: _this.yuanShen
                }).then(function (resp) {
                    if(resp.data === "修改成功"){
                        _this.dialogVisibleUpdate = false;
                        _this.selectAll();
                        _this.messageSuccess(resp.data, 'success');
                    } else {
                        _this.messageSuccess(resp.data, 'warning');
                    }
                    _this.clearYuanShen();
                })
            },

            deleteYuanShen(row) {
                this.$confirm("此操作永久删除当前数据，是否继续？", "提示", {type:"info"}
                ).then(()=>{
                    var _this = this
                    axios({
                        method: "post",
                        url: "http://localhost:8080/weby_spring_war/yuanShen/delete",
                        data: row
                    }).then(function (resp) {
                        if(resp.data === "删除成功"){
                            _this.selectAll();
                            _this.messageSuccess(resp.data, 'success');
                        } else {
                            _this.messageSuccess(resp.data, 'warning');
                        }
                    })
                }).catch(()=>{
                    this.$message.info("取消删除操作");
                })

            },

            deleteYuanShenByNames() {
                this.$confirm("此操作永久删除当前数据，是否继续？", "提示", {type:"info"}
                ).then(()=>{
                    this.selectedNames = [];
                    for(let i = 0; i < this.multipleSelection.length; i++) {
                        this.selectedNames[i] = this.multipleSelection[i].name;
                    }
                    var _this = this
                    axios({
                        method: "post",
                        url: "http://localhost:8080/weby_spring_war/yuanShen/deleteByNames",
                        data: _this.selectedNames
                    }).then(function (resp) {
                        if(resp.data === "删除成功"){
                            _this.selectAll();
                            _this.messageSuccess(resp.data, 'success');
                        } else {
                            _this.messageSuccess(resp.data, 'warning');
                        }
                    })
                }).catch(()=>{
                    this.$message.info("取消删除操作");
                })
            },

            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

            handleCurrentChange(val) {
                this.currentPage = val;
                this.subTableData = [];
                for(let i = 0;
                    i < this.currentPageSize && i + (val - 1) * this.currentPageSize < this.tableData.length;
                    i++) {
                    this.subTableData[i] = this.tableData[i + (val - 1) * this.currentPageSize];
                }
            },

            handleSizeChange(val) {
                this.currentPageSize = val;
                this.handleCurrentChange(this.currentPage);
            },

            messageSuccess(msg, type) {
                this.$message({
                    message: msg,
                    type: type
                });
            },

        }
    });
</script>

</body>
</html>